<template>
    <a-layout id="components-layout-demo-fixed-sider" style="height:450px;">
      <a-layout-sider >
        <div class="logo" style="border-radius: 25px;"/>
        <a-menu theme="dark" mode="inline" :default-selected-keys="['4']">
          <a-menu-item key="1">
            <a-icon type="user" />
            <span class="nav-text">导航 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="video-camera" />
            <span class="nav-text">导航 2</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="upload" />
            <span class="nav-text">导航 3</span>
          </a-menu-item>
          <a-menu-item key="4">
            <a-icon type="bar-chart" />
            <span class="nav-text">导航 4</span>
          </a-menu-item>
          <a-menu-item key="5">
            <a-icon type="cloud-o" />
            <span class="nav-text">导航 5</span>
          </a-menu-item>
          <a-menu-item key="6">
            <a-icon type="appstore-o" />
            <span class="nav-text">导航 6</span>
          </a-menu-item>
          <a-menu-item key="7">
            <a-icon type="team" />
            <span class="nav-text">导航 7</span>
          </a-menu-item>
          <a-menu-item key="8">
            <a-icon type="shop" />
            <span class="nav-text">导航 8</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout >
        <a-layout-header :style="{ padding: 0,background: '#96d8ba' }" />
        <a-layout-content :style="{ margin: '24px 16px 0', minHeight: 'auto' }">
          <div :style="{ padding: '24px', background: '#fff', textAlign: 'center' }">
            1<br />2<br />3<br />4<br />5<br />6
            <br />7<br />8<br />9<br />10<br />11
            <br />12<br />13<br />14<br />15<br />16
            <br />17<br />18<br />19<br />20<br />21
            <br />22<br />23<br />24<br />25<br />26
            <br />27<br />28<br />29<br />30<br />31
          </div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
          Copylight ©2020  by xxxx
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </template>
  <style>
  #components-layout-demo-fixed-sider .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
  </style>